<!DOCTYPE html>
<html lang="en" layout:decorator="layout/main" xmlns:layout="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width,user-scalable=no,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,initial-scale=1"/>

    <link rel="stylesheet" th:href="@{/thirdParty/datatables/dataTables.bootstrap.css}" />
    <link rel="stylesheet" th:href="@{/thirdParty/zTree/zTreeStyle.css}" />

    <title>test</title>
</head>
<body>
    <section class="content" layout:fragment="content">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <h3 class="box-title">菜单列表</h3>
                </div>
                <div class="col-xs-12">
                    <button type="button" onclick="toAdd();" class="btn bg-purple margin pull-right"
                            data-toggle="modal" data-target="#myModal"><i class="fa fa-credit-card"></i> 添加菜单
                    </button>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <table id="datasOnTable" class="table table-bordered table-hover">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>名称</th>
                            <th>URL</th>
                            <th>图标</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->
        </div>

        <!--dialog-->
        <div class="modal inmodal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content animated bounceInRight">
                    <form role="form" class="form-horizontal" id="updateFrom" th:action="@{/admin/menu/update}" method="post">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                            <i class="fa fa-laptop modal-icon"></i>
                            <h4 id="AAA" class="modal-title">编辑</h4>
                        </div>
                        <div class="modal-body col-xs-12">

                            <div class="zTreeDemoBackground right col-xs-6">
                                <input type="hidden" name="menuId" id="menuId"/>
                                <div class="form-group">
                                    <label for="name">菜单名称</label>
                                    <input type="text" class="form-control" id="name" name="name" placeholder="输入名称" />
                                </div>
                                <div class="form-group">
                                    <label for="name">访问URL</label>
                                    <input type="text" class="form-control" id="url" name="url" placeholder="输入访问URL 如/admin/user/list" />
                                </div>
                                <div class="form-group">
                                    <label for="name">图标</label>
                                    <input type="text" class="form-control" id="icon" name="icon" placeholder="输入图标码" />
                                </div>
                                <div class="form-group">
                                    <label for="name">父级菜单</label>
                                    <input type="text" class="form-control" id="parentId" name="parentId" placeholder="输入图标码" />
                                </div>
                            </div>

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                            <button type="button" id="saveBtn" class="btn btn-primary">保存设置</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

    </section>


    <div layout:fragment="script">
        <script th:src="@{/thirdParty/datatables/jquery.dataTables.min.js}"></script>
        <script th:src="@{/thirdParty/datatables/dataTables.bootstrap.min.js}"></script>
        <script th:src="@{/thirdParty/zTree/jquery.ztree.all.min.js}"></script>
        <script th:src="@{/thirdParty/jquery.form.js}" src="../static/thirdParty/jquery.form.js" />
        <script>
            $(function () {

                $("#datasOnTable").dataTable(
                        {
                            "filter" : false,//去掉搜索框
                            "ordering" : false,
                            "lengthChange": false,
                            "paginationType" : "full_numbers",
                            "destroy" : true,
                            "processing" : true,
                            "serverSide" : true,
                            "ajax" : {
                                "type":"get",
                                "url" :  ctx+"admin/menu/list",
                                "dataSrc": "content",
                                "dataFilter": function(data){
                                    var json = jQuery.parseJSON( data );
                                    json.recordsTotal = json.totalElements;
                                    json.recordsFiltered = json.totalElements;
                                    return JSON.stringify( json ); // return JSON string
                                },
                                "data": function (d) {
                                },
                                "error" : function(){
                                    alert("请求数据出错");
                                }
                            },
                            "columns" : [
                                {
                                    "data" : "id"
                                },
                                {
                                    "data" : "name"
                                },
                                {
                                    "data" : "url"
                                },
                                {
                                    "data" : "icon"
                                },
                                {
                                    "data" : null,
                                    "render":function(data,type,row){
                                        var str = '<button onclick="changeDialog('+row['id']+')" type="button" class="btn btn-white" data-toggle="modal" data-target="#myModal"><i class="fa fa-pencil"></i> Edit </button>';
                                        return str;
                                    }
                                }],
                            "language" : {
                                "url" : ctx+'thirdParty/datatables/dataTables.CN.txt'
                            }
                        });

                //编辑确认按钮
                $("#saveBtn").bind("click",function() {

                    beforeSubmit();
                    $("#updateFrom").ajaxSubmit({
                        success:function(){
                            alert("成功");
                            $('#myModal').modal('hide');
                            var roleId = $("#roleId").val();
                            if(roleId=='') {
                                window.location.href=ctx+"admin/role/listPage";
                            }
                        },
                        error: function (xhr, status, error) {
                            var result = jQuery.parseJSON(xhr.responseText);
                            alert(result.message);
                        }
                    });

                });

            });

            function beforeSubmit(){

            }

            function toAdd(){
                console.log("123");
                changeDialog(0);
            }

            function changeDialog(id){
                console.log(id);
                if(id!=0) {
                    $("#menuId").val(id);
                }
                var zTreeObj;
                $.ajax({type:"get",
                    url:ctx+"admin/menu/get/"+id,
                    data:{},
                    dataType:"json",
                    error: function(){
                        alert("系统忙，请稍后再试！");
                    },
                    success:function(json){
                        console.log(json);
                        $("#name").val(json.name);
                        $("#url").val(json.url);
                        $("#icon").val(json.icon);
                        $("#parentId").val(json.parentMenuId);
                    }
                });
            }
        </script>
    </div>


</body>
</html>